// store/modules/designs.js
// import classicSvg from '@/assets/designs/jersey/soccer_jersey/classic.svg';
// import classicPng from '@/assets/designs/jersey/soccer_jersey/classic.png';
// import tigerSvg from '@/assets/designs/jersey/soccer_jersey/tiger.svg';
// import tigerPng from '@/assets/designs/jersey/soccer_jersey/tiger.png';
// import bonesSvg from '@/assets/designs/jersey/roundneck_jersey/bones.svg';
// import bonesPng from '@/assets/designs/jersey/roundneck_jersey/bones.png';
// import dynamicSvg from '@/assets/designs/jersey/roundneck_jersey/dynamic.svg';
// import dynamicPng from '@/assets/designs/jersey/roundneck_jersey/dynamic.png';
// import warriorSvg from '@/assets/designs/jersey/roundneck_jersey/warrior.svg';
// import warriorPng from '@/assets/designs/jersey/roundneck_jersey/warrior.png';
// import pinstripesSvg from '@/assets/designs/jersey/softball_jersey/pinstripes.svg';
// import pinstripesPng from '@/assets/designs/jersey/softball_jersey/pinstripes.png';
// import stripesSvg from '@/assets/designs/jersey/softball_jersey/stripes.svg';
// import stripesPng from '@/assets/designs/jersey/softball_jersey/stripes.png';
// import velocitySvg from '@/assets/designs/jersey/softball_jersey/velocity.svg';
// import velocityPng from '@/assets/designs/jersey/softball_jersey/velocity.png';
// import motionSvg from '@/assets/designs/jersey/Cheer_Jersey/Motion.svg';
// import motionPng from '@/assets/designs/jersey/Cheer_Jersey/Motion.png';
// import triangleSvg from '@/assets/designs/jersey/Cheer_Jersey/Triangle.svg';
// import trianglePng from '@/assets/designs/jersey/Cheer_Jersey/Triangle.png';

const state = () => ({
    designs: [
        // {
        //     id: 'jersey-classic',
        //     name: 'Classic',
        //     path: classicSvg,
        //     thumbnailPath: classicPng,
        //     productType: 'jersey',
        //     modelId: 'jersey_1',
        //     price: 49.99,
        //     isDefault: true
        // },
        // {
        //     id: 'jersey-tiger',
        //     name: 'Tiger',
        //     path: tigerSvg,
        //     thumbnailPath: tigerPng,
        //     productType: 'jersey',
        //     modelId: 'jersey_1',
        //     price: 54.99
        // },
        // {
        //     id: 'jersey-bones',
        //     name: 'Bones',
        //     path: bonesSvg,
        //     thumbnailPath: bonesPng,
        //     modelId: 'jersey_4',
        //     price: 59.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-dynamic',
        //     name: 'Dynamic',
        //     path: dynamicSvg,
        //     thumbnailPath: dynamicPng,
        //     modelId: 'jersey_4',
        //     price: 59.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-warrior',
        //     name: 'Warrior',
        //     path: warriorSvg,
        //     thumbnailPath: warriorPng,
        //     modelId: 'jersey_4',
        //     price: 64.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-pinstripes',
        //     name: 'Pinstripes',
        //     path: pinstripesSvg,
        //     thumbnailPath: pinstripesPng,
        //     modelId: 'jersey_3',
        //     price: 54.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-stripes',
        //     name: 'Stripes',
        //     path: stripesSvg,
        //     thumbnailPath: stripesPng,
        //     modelId: 'jersey_3',
        //     price: 54.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-velocity',
        //     name: 'Velocity',
        //     path: velocitySvg,
        //     thumbnailPath: velocityPng,
        //     modelId: 'jersey_3',
        //     price: 59.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-cheer-motion',
        //     name: 'Cheer Motion',
        //     path: motionSvg,
        //     thumbnailPath: motionPng,
        //     modelId: 'jersey_5',
        //     price: 56.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'jersey-cheer-triangle',
        //     name: 'Cheer Triangle',
        //     path: triangleSvg,
        //     thumbnailPath: trianglePng,
        //     modelId: 'jersey_5',
        //     price: 56.99,
        //     productType: 'jersey'
        // },
        // {
        //     id: 'sock-lines',
        //     name: 'Lines',
        //     path: '/assets/designs/sock/lines.svg',
        //     thumbnailPath: '/assets/designs/sock/lines.png',
        //     productType: 'sock',
        //     modelId: 'socks_1',
        //     price: 19.99,
        //     isDefault: true
        // },
    ],
    selectedDesignId: '',
    selectedProductType: ''
});

const mutations = {
    SET_SELECTED_PRODUCT_TYPE(state, productType) {
        state.selectedProductType = productType;

        // Find default design for this product type
        const defaultDesign = state.designs.find(d =>
            d.productType === productType &&
            d.isDefault
        );

        if (defaultDesign) {
            state.selectedDesignId = defaultDesign.id;
        }
    },
    SET_SELECTED_DESIGN(state, designId) {
        state.selectedDesignId = designId;
    },
    LOAD_SAVED_DESIGN(state, designId) {
        const design = state.designs.find(d => d.id === designId);
        if (design) {
            state.selectedDesignId = designId;
            state.selectedProductType = design.productType;
        }
    },
    SET_DESIGNS(state, payload) {
        state.designs = payload;
    },
};

const actions = {
    setSelectedProductType({ commit }, productType) {
        commit('SET_SELECTED_PRODUCT_TYPE', productType);
    },
    setSelectedDesign({ commit }, designId) {
        commit('SET_SELECTED_DESIGN', designId);
    },
    loadSavedDesign({ commit }, designId) {
        commit('LOAD_SAVED_DESIGN', designId);
    },
    setDesigns({ commit }, designs) {
        commit('SET_DESIGNS', designs);
    },
};

const getters = {
    designs: state => state.designs,
    selectedDesign: state => state.designs.find(d => d.id === state.selectedDesignId),
    selectedProductType: state => state.selectedProductType,
    selectedDesignId: state => state.selectedDesignId,
    designsByProductType: state => productType =>
        state.designs.filter(d => d.productType === productType),
    defaultDesignByProductType: state => productType =>
        state.designs.find(d => d.productType === productType && d.isDefault)
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};
